<template>
  <el-col
    :md="element.span || 12"
    :xs="24"
    :offset="element.offset || 0"
    :key="`${element.type}_${index}`"
    v-for="(element, index) in columns"
  >
    <el-form-item
      class="widget-form-item"
      v-if="element.isSystem == 'N' || element.isSystem == undefined"
      :label="element.label"
      :labelWidth="element.labelWidth !== undefined && element.labelWidth + 'px'"
      :prop="element.prop"
      :required="element.isRequired == 'Y'"
    >
      <div :style="element.button ? 'display:flex;justify-content:space-between' : ''">
        <widget-form-item
          :item="element"
          :style="element.button ? 'width:85%' : ''"
          :params="element.params"
        />
      </div>
    </el-form-item>
  </el-col>
</template>

<script>
import WidgetFormItem from './WidgetFormItem.vue'
export default {
  name: 'WidgetFormTemplate',
  components: { WidgetFormItem },
  props: {
    column: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      localColumn: {}
    }
  },
  computed: {
    columns() {
      if (this.localColumn && Object.keys(this.localColumn).length) {
        try {
          const { content } = this.localColumn
          const contentObj = JSON.parse(content)
          const { column } = contentObj
          return column
        } catch (e) {
          console.log('error!', e)
          return []
        }
      } else {
        return []
      }
    }
  },
  watch: {
    column: {
      handler(newVal) {
        if (newVal) {
          this.localColumn = newVal
        }
      },
      deep: true,
      immediate: true
    },
    localColumn: {
      handler(newVal) {
        this.$emit('update:column', newVal)
      },
      deep: true
    }
  }
}
</script>

<style></style>
